<template>
  <div class="card-wrap advert-sales">
    <div class="flex-c" style="margin-bottom: 10px">
      <div class="card-item">
        <Title>
          <template #content>
            <p class="title">销售表现</p>
            <icon-double-right style="color: #999; margin-left: 5px; font-size: 16px" />
          </template>
        </Title>
      </div>
      <div class="card-item">
        <Title>
          <template #content>
            <p class="title">广告表现</p>
            <icon-double-right style="color: #999; margin-left: 5px; font-size: 16px" />
          </template>
        </Title>
      </div>
    </div>
    <HomeLineChart :targetList="targetList" :xData="xData" :dataMap="dataMap" :checkedKeys="checkedKeys" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import Title from './Title.vue'
  import HomeLineChart from './HomeLineChart.vue'

  const targetList = ref<Array<any>>([
    {
      tip: '1.包含FBA销量，FBM销量和多渠道销量；2.来自payment的order quantity',
      name: '销量',
      value: 23.11,
      type: 1,
      value1: 29.45,
      value2: 29.45,
      key: '1',
      color: '#5470c6',
    },
    {
      tip: '销售额包含pending...',
      name: '销售额',
      value: 23.11,
      type: 2,
      value1: 69.72,
      value2: 29.45,
      unit: '$',
      key: '2',
      color: '#91cc75',
    },
    {
      name: '订单量',
      value: 100,
      type: 1,
      value1: 69.72,
      value2: 29.45,
      key: '3',
      color: '#fac858',
    },
    {
      tip: '销售额包含pending...',
      name: '订单金额',
      value: 100.0,
      type: 2,
      value1: 69.72,
      value2: 29.45,
      unit: '$',
      key: '4',
      color: '#ee6666',
    },
    {
      tip: '销售额包含pending...',
      name: '毛利润',
      value: 23.11,
      type: 3,
      value1: 69.72,
      value2: 29.45,
      unit: '%',
      line: 20,
      key: '5',
      color: '#73c0de',
    },
    {
      name: '广告花费',
      value: 23.11,
      type: 2,
      value1: 69.72,
      value2: 29.45,
      unit: '$',
      key: '6',
      color: '#3ba272',
    },
    {
      name: '广告销售额',
      value: 100.11,
      type: 2,
      value1: 69.72,
      value2: 29.45,
      unit: '$',
      key: '7',
      color: '#fc8452',
    },
    {
      name: 'ACOS',
      value: 23.11,
      type: 3,
      value1: 69.72,
      value2: 29.45,
      unit: '%',
      key: '8',
      color: '#9a60b4',
    },
    {
      name: 'ACOAS',
      value: 100.11,
      type: 3,
      value1: 69.72,
      value2: 29.45,
      unit: '%',
      key: '9',
      color: '#ea7ccc',
    },
    {
      name: 'ASOAS',
      value: 23.11,
      type: 3,
      value1: 69.72,
      value2: 29.45,
      unit: '%',
      key: '10',
      color: '#a3beff',
    },
  ])
  const xData = ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07', '10/08', '10/09', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15']
  const checkedKeys = ref<Array<string>>(['1', '2'])
  const dataMap = {
    '1': [1389.68, 16952.5, 21218.99, 22271.66, 19460, 20128.15, 19081.98, 19264.82, 18453.78, 20297.51, 21659.87, 20104.37, 16948.43, 15849.43, 18000],
    '2': [2666405, 8781326, 10911538, 12263291, 10908839, 11160448, 11076223, 10731616, 10167198, 11151960, 12698044, 12279815, 11471245, 10084785, 20084785],
    '3': [77441, 29035, 36197, 38833, 33622, 34701, 32540, 32696, 31115, 34149, 37066, 34092, 26380, 24499, 664],
    '4': [0.3017212578076283, 0.33064482516649535, 0.3317314204468701, 0.31666051144019985, 0.3082087837211641, 0.3109283785023684, 0.2937824563481613, 0.3046698651908529, 0.30603318633117993, 0.30621523032722503, 0.2919032254101498, 0.27762633231852435, 0.22996632013351648, 0.24293031532154627, 0.2744130494976671],
    '5': [0.6377717229891143, 0.5838643017048389, 0.5862085255684173, 0.5735240645842453, 0.578787698530724, 0.5800452436529208, 0.5864161032575291, 0.5892103009542452, 0.5930830789008517, 0.5943808017804327, 0.5843595208546916, 0.5897093159685557, 0.642472706595906, 0.6469419159965712, 0.5884036144578313],
    '6': [89914.97, 36253.41, 40478.16, 38926.61, 34378.38, 37587.27, 40282.71, 35430.57, 33317.82, 36423.8, 36354.3, 35509.62, 34640.55, 32066.8, 230.76],
    '7': [2073, 818, 889, 897, 807, 872, 893, 821, 785, 767, 786, 833, 901, 852, 6],
    '8': [54.9293182, 46.761118499999995, 52.4208363, 57.2144864, 56.6053432, 53.55044410000001, 47.3701496, 54.3734408, 55.387117200000006, 55.7259539, 59.579939599999996, 56.6166858, 48.9265615, 49.4262914, 169.3101057],
    '9': [1.820521413, 2.138528831, 1.907638394, 1.747809099, 1.766617677, 1.867398146, 2.111034075, 1.839133197, 1.805474, 1.794495975, 1.678417276, 1.766263753, 2.043879581, 2.023214715, 0.590632199],
    '10': [2.6768765899200684, 2.817289478215946, 2.4560046412686134, 2.3098910720263692, 2.4002141454999704, 2.512895881963056, 2.7443146896127844, 2.5110105211646685, 2.522898923348867, 2.24603941550265, 2.120541736362165, 2.4433884782353634, 3.415466262319939, 3.4776929670598795, 0.9036144578313252],
  }
</script>
<style lang="less" scoped>
  .advert-sales {
    .card-item {
      width: 50%;
    }
  }
</style>
<style scoped>
  @media screen and (max-width: 1500px) {
  }
</style>
